<!--
 * @Author: actor
 * @Date: 2023-11-13 15:42:40
 * @email: 395593455@qq.com
 * @LastEditors: actor
 * @LastEditTime: 2023-12-19 10:18:35
 * @FilePath: \i-hos-app\shared\emr\src\components\file\CommonList.vue
 * @Description: 动态渲染组件列表
-->
<template>
  <Transition name="slide-fade">
    <!-- 下拉列表 -->
    <DropDownList v-if="commonComponentActive == 'dropDownList'" />
    <!-- 富文本编辑（获取双击鼠标的位置来展示）   -->
    <div v-else-if="commonComponentActive == 'briefEdit'" class="briefEdit">
      <EditSet edition="brief" />
      <!-- <el-icon class="briefEditIcon" color="#409EFC" size="20" data-event="close"><CircleCloseFilled /></el-icon> -->
    </div>
    <!-- 时间插件 -->
    <Calendar v-else-if="commonComponentActive == 'calendar'" />
    <!-- 月经史插件 -->
    <Menses v-else-if="commonComponentActive == 'menses'" />
    <!-- 牙位图插件 -->
    <Tooth v-else-if="commonComponentActive == 'tooth'" />
    <!-- 自定义菜单 -->
    <ContexMenu v-else-if="commonComponentActive == 'contexMenu'" />
  </Transition>
</template>

<script setup lang="ts">
  import { toRefs } from 'vue'
  // 接口约束
  import { IPageConfigStore } from '../../interface/page'

  // 电子病历配置数据
  import { usePageConfigStore } from '../../store/pageConfig'
  // 解构 store的配置数据
  const pageConfigStore: IPageConfigStore = usePageConfigStore()
  const { commonComponentActive } = toRefs<any>(pageConfigStore)

  // 公共组件
  import EditSet from '../../components/file/EditSet.vue' // 富文本操作配置组件
  import DropDownList from '../../components/common/DropDownList.vue' // 下拉框组件
  import Calendar from '../../components/common/Calendar.vue' // 时间组件
  import Menses from '../../components/common/Menses.vue' // 月经史组件
  import Tooth from '../../components/common/Tooth.vue' // 牙位图组件
  import ContexMenu from '../../components/common/ContexMenu.vue' // 自定义下拉菜单组件
</script>

<style scoped lang="scss">
  .briefEdit {
    .edit_set {
      transform: translate(-50%, 0);
    }
    // .briefEditIcon {
    //   position: absolute;
    //   top: -10px;
    //   right: -15px;
    //   cursor: pointer;
    //   &::before {
    //     content: '';
    //     display: block;
    //     width: 100%;
    //     height: 100%;
    //     position: absolute;
    //     top: 0;
    //     left: 0;
    //     background-color: transparent;
    //     border-radius: 50%;
    //   }
    // }
  }

  /*
    进入和离开动画可以使用不同
    持续时间和速度曲线。
    */
  .slide-fade-enter-active {
    transition: all 0.2s ease-out;
  }
  .slide-fade-leave-active {
    transition: all 0.2s ease-out;
  }
  .slide-fade-enter-from,
  .slide-fade-leave-to {
    transform: translateY(30px);
    opacity: 0;
  }
</style>
